<template>
	<view>
		<u-collapse>
		    <u-collapse-item
		      :title="item.AreaName"
		      :name="item.AreaName"
			  v-for="item in videoArea" :key="item.SortingArea">
				<u-icon name="/static/theme/default/home/video.png" size="15" slot="icon"></u-icon>
				<view class="video-name" hover-class="clickable" v-for="v in item.list" :key="v.IndexCode" @click="goVideo(v)">{{v.Name}}</view>
		    </u-collapse-item>
		  </u-collapse>
	</view>
</template>

<script>
	import _custom from '../../../../common/_custom.js'
	
	export default {
		data() {
			return {
				videoArea: []
			}
		},
		onLoad() {
			uni.$on('video-area',res => {
				if(!res.length) {
					uni.showToast({
						title: '无监控区域数据',
						icon: 'none'
					})
					setTimeout(() =>{
						uni.switchTab({
							url: '/pages/home/index'
						})
					},500)
					return
				}
				this.videoArea = res;
				this.getVideoConfig()
			})
			uni.$on('video-config',res => {
				this.videoArea.forEach(item => {
					item.list = []
					res.forEach(v => {
						if(item.AreaName == v.AreaName) {
							item.list.push(v)
						}
					})
				})
				this.$forceUpdate()
			})
			this.getVideoArea();
		},
		methods: {
			getVideoArea() {
				_custom.getDataJava({
					name: 'video-area',
					apiname: 'getVideoArea'
				})
			},
			getVideoConfig() {
				_custom.getDataJava({
					name: 'video-config',
					apiname: 'getVideoConfig'
				})
			},
			goVideo(v) {
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: './video?data=' + v.IndexCode
				})
				// #endif
			}
		}
	}
</script>

<style>
	.video-name {
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		line-height: 100rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	
	/deep/ .u-collapse-item__content__text {
		padding: 0;
	}
</style>
